<template lang="pug">
  .container
    .weui-flex(v-swiper:mySwiper="swiperOption")
      .weui-flex__item.swiper-wrapper
        .placeholder.swiper-slide(v-for='item in imgs')
          img(v-bind:src="'/img/' + item.img" )
      .swiper-pagination.swiper-pagination-bullets
    .weui-flex.intro
      .weui-flex__item
        .placeholder
          .title {{productInfo.intro.title}}
          .text {{productInfo.intro.text}}
          .price {{productInfo.intro.price}}元
    .weui-flex.margin-top
      .weui-flex__item
        .placeholder 快递配送
    .weui-tab
      .weui-navbar.textline
        .weui-navbar__item(@click="handlePage(1)" :class="[ showPage === 1 ? 'nav-active' : '' ]") 商品详情
        .weui-navbar__item(@click="handlePage(2)" :class="[ showPage === 2 ? 'nav-active' : '' ]") 产品参数
        .weui-navbar__item(@click="handlePage(3)" :class="[ showPage === 3 ? 'nav-active' : '' ]") 常见问题
      .weui-tab__panel
        div(v-if="showPage === 1") {{productInfo.productInfo}}

        div(v-if="showPage === 2")  {{productInfo.productParam}}

        div(v-if="showPage === 3")  {{productInfo.question}}
    //- .weui-flex.footer
    //-   .li.boss 客服
    //-     img(src='/icon/wechat.png')
        
      //- img(src='/icon/cart@top.png')
        //- .li.shopCar 购物车
        .li.button 立即购买
    
          
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      showPage: 1,
      imgs: [
        { img: 'banner-1a.png' },
        { img: 'banner-2a.png' },
        { img: 'banner-3a.png' },
        { img: 'banner-4a.png' }
      ],
      swiperOption: {
        slidesPerView: 'auto',
        centeredSlides: true,
        direction: 'horizontal',
        autoplayDisableOnInteraction: true,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true,
          clickable: true
        }
      }
    }
  },
  computed: {
    ...mapState([
      'productInfo'
    ])
  },
  mounted() {
    this.mySwiper.autoplay.start()
    console.log(this.mySwiper)
  },
  methods: {
    handlePage(pagNum) {
      this.showPage = pagNum
    }
  },
  beforeCreate() {
    let id = this.$route.query.id
    this.$store.dispatch('getProductInfo', id)
  }

}
</script>
<style scoped lang="sass">
.footer
  position: absolute
  bottom: 0
  height: 6%
  .boss
    width: 10%
    img
      margin: 4px
      width: 100%
    
    
  .shopCar
    width: 20%
  
.textline
  border-bottom: 1px solid #ccc
.weui-navbar
  height: 3rem
  position: static 
.weui-navbar__item
  &:after
    border-right: none
.nav-active
  color: #21B100
.weui-navbar
  margin-top: 40px
  background-color: #Fff
.weui-tab
  top: -.3rem

.weui-tab__panel
  background-color: #fff
  text-align: center
.margin-top
  margin-top: 10px
  height: 35px
  padding: 8px
  line-height: 35px
  color: #26252B
  font-weight: 400
.container
  background: #F8F8F8
  .weui-flex
    background-color: #fff
.intro
  padding-left: 5% 
  .title
    font-weight: 500
    font-size: 16px
  .price
    color: #FF4A00
    font-size: 16px
    font-weight: 500
  .text
    margin: 5px
    font-size: 10px
    color: #999

.swiper-slide
	img
		width: 100%
		height: 300px
.my-swiper 
	height: 300px
	width: 100%
	.swiper-slide 
		text-align: center
		font-size: 38px
		font-weight: 700
		background-color: #eee
		display: flex
		justify-content: center
		align-items: center

</style>